<template>
	<view class="page" ref="page">
		<!-- 搜索 -->
		<view class="search-index">
			<!-- #ifndef H5 -->
				<view class="icon" @click="scanCode">
					<text class="iconfont ">&#xe60d;</text>
				</view>
			<!-- #endif -->
			<!-- #ifdef  H5 -->
			<view class="icon" @click="onPayCode">
				<text class="iconfont ">&#xe60c;</text>
			</view>
			<!-- #endif -->
			<view class="search" @tap="onSearch">
				<view class="iconfont "> &#xe60c;</view>
				<input type="text" placeholder="输入搜索内容" />
			</view>
			<view class="icon">
				<text class="iconfont "></text>
			</view>
		</view>
		<!-- <view>{{data.property}}</view> -->
		<!-- 分类数据 -->
		<view class="classify-data" :style="'height:'+height+'px'">
			<view class="classify-one">
				<scroll-view scroll-y class="classify-list">
					<!-- <view class="list action">
						<text>推荐分类</text>
					</view> -->
					<view :class="property_id==item.id?'list action':'list ' " v-for="(item,index) in data.property"  @tap="checkProperty(item.id,index)" :key="index" >
						<text>{{item.name}}</text>
					</view>
				</scroll-view>
			</view>
			<view class="classify-two-three">
				<scroll-view scroll-y class="scroll">
					<!-- <view class="classify-two" v-for="(item,index) in data.property[checkIndex].sub" :key="index">
						<view class="two-name">
							<view class="name">{{item.name}}</view>
						</view> -->
						<view class="classify-three">
							<view class="list"  v-for="(v,index) in data.property[checkIndex].sub" :key="index" @tap="checkPropertyValue(v.id,v.name)">
								<image :src="v.cover_image "></image>
								<text>{{v.name}}</text>
							</view>
							<!-- <view class="list">
								<image :src="'/static/img/goods_thumb_0'+(index+1)+'.png'"></image>
								<text>男衣服</text>
							</view>
							<view class="list">
								<image :src="'/static/img/goods_thumb_0'+(index+1)+'.png'"></image>
								<text>衣服啊</text>
							</view> -->
						</view>
					<!-- </view> -->
				</scroll-view>
			</view>
		</view>
		<!-- tabbar -->
		<TabBar :tabBarShow="1" :pageBottom="pageBottom"></TabBar>
	</view>
</template>

<script>
	import TabBar from '../../components/TabBar/TabBar.vue';
	import store from '@/store/index.js';
	import {oss_host} from '@/config/config.js';
	export default {
		components:{
			TabBar,
		},
		data() {
			return {
				OSS_HOST: oss_host,
				height: 0,
				property_id:0,
				checkIndex:0,
				pageBottom:'',
				data:{
					property:[]
				},
			};
		},
		onReady() {
			setTimeout(()=>{
			  uni.hideTabBar()  
			},100)
			let info = uni.createSelectorQuery().select(".page");
	　　　  info.boundingClientRect((data) => { //data - 各种参数
						console.log(data.height);
						this.height = data.height - 100;
					  // #ifdef APP-PLUS 
						this.height = data.height - 130;
						// #endif 
						
	　　    }).exec()
		},
		onShow(){
			
		},
		onLoad: function(e)  {
			let _this = this
			// console.log(1111)
			uni.getSystemInfo({
				success: function(res) {
					// console.log(res,'手机信息')
					// that.widowWidth = res.widowWidth;2
					// that.windowHeight = res.windowHeight * 2;
					// console.log(that.windowHeight,'****windowHeight*****')
					// that.pageTop =res.safeAreaInsets.top *2; //头部刘海
					_this.pageBottom = res.safeAreaInsets.bottom *2 //底部刘海
			
				}
			})
			_this.getList()
		},
		
		methods:{
			/**
			 * 扫一扫点击
			 */
			onCode(){
				uni.showToast({
				  title: '开发中，尽情期待！',
				  icon: 'none'
				})
				return ;
				// 只允许通过相机扫码
				uni.scanCode({
					onlyFromCamera: true,
					success: function (res) {
							console.log('条码类型：' + res.scanType);
							console.log('条码内容：' + res.result);
					}
				});
			},
			/**
			 * 搜索点击
			 */
			onSearch(){
				uni.navigateTo({url:'/pages/search/search'})
			},
			/**
			 * 付款码点击
			 */
			onPayCode(){
				uni.navigateTo({
					url: '/pages/PaymentCode/PaymentCode'
				})
			},
			// 扫码
			scanCode(){
				let _this = this;
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						console.log(res) 
						//二维码
						if(res.scanType=='QR_CODE'){ 
							const code = res.result
							
							
						 
						}else{
							// 条码
							const code = res.result
							_this.$refer.setVilit('/pages/GoodsDetails/GoodsDetails')
							let callback = function(url) {
								_this.$refs.popupvLogin.open()
							}
							var data = {
								code: code
							}
							_this.$refer.toUrl(callback, data)
						} 
						
					}
				});
			},
			getList() {
				const _this = this
					 
				var opt = {
					url: '/product/getProperty', 
					data:{
						property_id:this.property_id||'',
						
					},
					success: function(res) { 
					 
						if (res.status == 1) { 
							 let result = res.data
							
							_this.data.property =Object.values(result.list) 
							_this.property_id =_this.data.property[0]['id'] 
							// console.log('*****1',_this.data.property);
							// for(let v in _this.data.property){
							// 	_this.property_id = v.id
							// 	return
							// }
							console.log('*****',_this.property_id);
							
							 // _this.data.property.forEach(function(item,index){
								//  _this.property_id = item.id
								//  return
							 // })
							
							
							
							
							
						}  
						// _this.skeletonShow = false;
					}
				};
			
				
				this.$service.GetApi(opt) //网络
				
			
			
			},
			// 左侧分类点击
			checkProperty(id,index){
				this.property_id = id
				this.checkIndex = index
			},
			// 右侧分类
			checkPropertyValue(id,name){
				// 跳转
				let _this = this
				
				_this.$refer.setVilit('/pages/SearchGoodsList/SearchGoodsList')
				let callback = function(url) {
					_this.$refs.popupvLogin.open()
				}
				let data = {
					property_id:id,
					name:name
					// a:2
				}
				_this.$refer.toUrl(callback, data)
			}
			
			
		}
	}
</script>

<style scoped lang="scss">
@import 'classify.scss'
</style>
